<template>
  <div class="vux-actionsheet">

    <transition name="vux-actionsheet-mask">
      <div class="weui-mask weui-mask_transparent" @click="onClickingMask" v-show="show"></div>
    </transition>

    <div class="weui-skin_android" v-if="theme === 'android'">
      <transition name="vux-android-actionsheet" @after-enter="$emit('on-after-show')" @after-leave="$emit('on-after-hide')">
        <div class="weui-actionsheet" v-show="show">
          <div class="weui-actionsheet__menu">
            <div class="weui-actionsheet__cell" v-for="(text, key) in menus" @click="onMenuClick(text, key)" v-html="text.label || text">
            </div>
          </div>
        </div>
      </transition>
    </div>

    <div class="weui-actionsheet" :class="{'weui-actionsheet_toggle': show}" v-else ref="iOSMenu">
      <div v-if="icon" class="weui-actionsheet__menu">
        <div class="weui-actionsheet__cell" v-if="hasHeaderSlot">
          <slot name="header"></slot>
        </div>
        <div class="weui-actionsheet__cell" v-for="(text, key) in menus" @click="onMenuClick(text, key)" v-html="text.label || text" :class="`vux-actionsheet-menu-${text.type || 'default'}`">
        </div>
      </div>
      <div v-else class="weui-actionsheet__menu weui-actionsheet__menu_flex">
        <div class="weui-actionsheet__cell" v-if="hasHeaderSlot">
          <slot name="header"></slot>
        </div>
        <div class="weui-actionsheet__cell weui-actionsheet__cell-flex" v-for="(text, key) in menus" @click="onMenuClick(text, key)" :class="`vux-actionsheet-menu-${text.type || 'default'}`">
          <div class="weui-actionsheet__cell-flex-img"><img :src="images[key]" /></div>
          <div>{{text.label}}</div>
        </div>
      </div>
      <div class="weui-actionsheet__action_hr"></div>
      <div class="weui-actionsheet__action" @click="emitEvent('on-click-menu', 'cancel')" v-if="showCancel">
        <div class="weui-actionsheet__cell">{{cancelText || '取消'}}</div>
      </div>
    </div>

  </div>
</template>


<script>
export default {
  name: "actionsheet",
  mounted() {
    this.hasHeaderSlot = !!this.$slots.header;
    this.$nextTick(() => {
      this.$tabbar = document.querySelector(".weui-tabbar");
      this.$refs.iOSMenu &&
        this.$refs.iOSMenu.addEventListener(
          "transitionend",
          this.onTransitionEnd
        );
    });
  },
  props: {
    value: Boolean,
    showCancel: Boolean,
    cancelText: String,
    theme: {
      type: String,
      default: "ios"
    },
    icon: {
      type: Boolean,
      default: false
    },
    menus: {
      type: [Object, Array],
      default: () => ({})
    },
    closeOnClickingMask: {
      type: Boolean,
      default: true
    },
    closeOnClickingMenu: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      hasHeaderSlot: false,
      show: false,
      images: [
        "",

        ""
        ,""
      ]
    };
  },
  methods: {
    onTransitionEnd() {
      this.$emit(this.show ? "on-after-show" : "on-after-hide");
    },
    onMenuClick(text, key) {
      if (typeof text === "string") {
        this.emitEvent("on-click-menu", key, text);
      } else {
        if (text.type !== "disabled" && text.type !== "info") {
          if (text.value || text.value === 0) {
            this.emitEvent("on-click-menu", text.value, text);
          } else {
            this.emitEvent("on-click-menu",key,"", text);
            this.show = false;
          }
        }
      }
    },
    onClickingMask() {
      this.$emit("on-click-mask");
      this.closeOnClickingMask && (this.show = false);
    },
    emitEvent(event, menu, item) {
      if (event === "on-click-menu" && !/.noop/.test(menu)) {
        let _item = item;
        if (typeof _item === "object") {
          _item = JSON.parse(JSON.stringify(_item));
        }
        this.$emit(event, menu, _item);
        this.$emit(`${event}-${menu}`);
        this.closeOnClickingMenu && (this.show = false);
      }
    },
    fixIos(zIndex) {
      if (
        this.$el.parentNode &&
        this.$el.parentNode.className.indexOf("v-transfer-dom") !== -1
      ) {
        return;
      }
      if (this.$tabbar && /iphone/i.test(navigator.userAgent)) {
        this.$tabbar.style.zIndex = zIndex;
      }
    }
  },
  watch: {
    show(val) {
      this.$emit("input", val);
      if (val) {
        this.fixIos(-1);
      } else {
        setTimeout(() => {
          this.fixIos(100);
        }, 200);
      }
    },
    value: {
      handler: function(val) {
        this.show = val;
      },
      immediate: true
    }
  },
  beforeDestroy() {
    this.fixIos(100);
    this.$refs.iOSMenu &&
      this.$refs.iOSMenu.removeEventListener(
        "transitionend",
        this.onTransitionEnd
      );
  }
};
</script>

<style lang="less">
@import "./weui_mask";
@import "./weui_actionsheet";
@actionsheet-label-primary-color: red;
@actionsheet-label-warn-color: red;
@actionsheet-label-default-color: rgba(51, 51, 51, 1);
@actionsheet-label-disabled-color: red;
.vux-actionsheet-menu-primary {
  color: @actionsheet-label-primary-color;
}
.weui-actionsheet__menu_flex {
  display: flex;
  margin: 0 0.3867rem;
  border-top-left-radius: 0.1067rem;
  border-top-right-radius: 0.1067rem;
  padding: 0.4267rem 0 0.2667rem;
}
.weui-actionsheet__cell-flex {
  flex: 1;
}
.weui-actionsheet__cell-flex-img {
  img {
    height: 1.2rem;
    width: 1.2rem;
  }
}
.weui-actionsheet__action_hr {
  height: 0.2667rem;
  background: rgba(245, 245, 245, 1);
  margin: 0 0.3867rem;
}
.vux-actionsheet-menu-warn {
  color: @actionsheet-label-warn-color;
}
.vux-actionsheet-menu-default {
  color: @actionsheet-label-default-color;
  font-size: 0.3467rem;
}
.vux-actionsheet-menu-disabled {
  color: @actionsheet-label-disabled-color;
}
.vux-actionsheet-mask-enter,
.vux-actionsheet-mask-leave-active,
.vux-android-actionsheet-enter,
.vux-android-actionsheet-leave-active {
  opacity: 0;
}
.vux-actionsheet-mask-leave-active,
.vux-actionsheet-mask-enter-active,
.vux-android-actionsheet-leave-active,
.vux-android-actionsheet-enter-active {
  transition: opacity 300ms !important;
}
</style>
